import React, { useState } from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import http from '@/services/request';
import { Space, Button, Select } from 'antd';
import { Input } from 'antd';
import { RightOutlined, UpOutlined } from '@ant-design/icons';
// import { ColumnProps } from 'antd/es/table'
const { Option } = Select;

const { Search } = Input;

/* 新增菜单列表 */
export const formItemLeftList = [
  {
    label: '预订肉鸡部位',
    name: 'bookBroilerParts',
    message: '请输入预订肉鸡部位'
  },
  { label: '预订时间', name: 'bookDate', message: '请输入预订时间' },
  { label: '客户名称', name: 'customer', message: '请输入客户名称' },
  { label: '数量', name: 'number', message: '请输入数量' },
];

export const formItemRightList = [
  {
    label: '生产完成时间',
    name: 'productionCompletionDate',
    message: '请输入生产完成时间'
  },
  { label: '状态', name: 'status', message: '请输入状态' },
  { label: '单价', name: 'unitPrice', message: '请输入单价' },
  { label: '总价', name: 'totalPrice', message: '请输入总价' }
];

export const descriptionsList = [
  { label: '客户', key: 'customer' },
  { label: '预订肉鸡部位', key: 'bookBroilerParts' },
  { label: '预订时间', key: 'bookDate' },
  { label: '生产完成时间', key: 'productionCompletionDate' },
  { label: '状态', key: 'status' },
  { label: '数量', key: 'number' },
  { label: '单价', key: 'unitPrice' },
  { label: '总价', key: 'totalPrice' },
]

/* 高级搜索区域 */
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '订单编号',
    name: 'orderNumber',
    placeholder: '请输入订单编号'
  },
  {
    type: 'input' as Itype,
    label: '客户名称',
    name: 'customer',
    placeholder: '请输入客户名称'
  },
  {
    type: 'input' as Itype,
    label: '预订肉鸡部位',
    name: 'bookBroilerParts',
    placeholder: '请输入预订肉鸡部位'
  },
  {
    type: 'input' as Itype,
    label: '单价',
    name: 'unitPrice',
    placeholder: '请输入单价'
  },
  {
    type: 'input' as Itype,
    label: '总价',
    name: 'totalPrice',
    placeholder: '请输入总价'
  },
  {
    type: 'input' as Itype,
    label: '数量',
    name: 'number',
    placeholder: '请输入数量'
  },
  {
    type: 'datepicker' as Itype,
    label: '预订时间',
    name: 'bookDate',
    otherOptions: {
      placeholder: '预定日期'
    }
  },
  {
    type: 'datepicker' as Itype,
    label: '生产完成时间',
    name: 'productionCompletionDate',
    otherOptions: {
      placeholder: '生产完成日期'
    }
  },
  {
    type: 'input' as Itype,
    label: '状态',
    name: 'status',
    placeholder: '请输入状态'
  }
];
/* 工具栏区域 */

// 选择器配置
export const SearchSelector = (props: any) => {
  const [searchid, setsearchid]: any = useState('bookBroilerParts');
  return (
    <div
      style={{
        display: 'inline-block',
        width: '380px',
        marginBottom: 10,
        marginRight: 10
      }}
    >
      <Select
        defaultValue={Options[0].label}
        style={{ width: 100 }}
        defaultActiveFirstOption
        onSelect={(value: string, option: any) => {
          setsearchid(option.key);
        }}
      >
        {Options.map((i) => (
          <Option value={i.label} key={i.value} children={null}></Option>
        ))}
      </Select>
      <Search
        placeholder="请输入您要查的数据"
        onSearch={(e: string) => {
          // 清空输入框之后，再次搜索，出现的是初始化时候的数据
          if (e === '') {
            http
              .get('/server/productionPlanSlaughter/list/1/10')
              .then((res: { data: { records: any } }) => {
                props.dataSource(res.data.records);
              });
            return;
          }
          switch (searchid) {
            case 'bookBroilerParts': {
              http(`/server/productionPlanSlaughter/getByChickenPart/${e}`).then(
                (res: { data: any }) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            case 'orderNumber': {
              http(`/server/productionPlanSlaughter/getByOrderNumber/${e}`).then(
                (res: { data: any }) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            case 'customer': {
              http(`/server/productionPlanSlaughter/getByCustomer/${e}`).then(
                (res: { data: any }) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            default: {
              break;
            }
          }
        }}
        style={{ width: '280px' }}
        enterButton
      />
    </div>
  );
};
const Options = [
  { label: '预订部位', value: 'bookBroilerParts', onClick: (e: any) => { } },
  { label: '订单编号', value: 'orderNumber', onClick: (e: any) => { } },
  { label: '客户名', value: 'customer', onClick: (e: any) => { } }
];

//高级检索
export const UseSearch = (props: any) => {
  return (
    <Space style={{ float: 'right' }}>
      {props.isMoreSearchShow ? (
        <Button
          type="link"
          size="large"
          /* onClick={() => onMoreSearchClick(false)} */
          onClick={() => {
            props.setisMoreSearchShow(false); props.setsearchMore(false);
          }}
        >
          收起
          <UpOutlined />
        </Button>
      ) : (
        <>
          <Button
            type="link"
            size="middle"
            onClick={() => {
              props.setisMoreSearchShow(true); props.setsearchMore(true);
            }}
          >
            高级检索
            <RightOutlined style={{ marginLeft: '1px' }} />
          </Button>
        </>
      )}
    </Space>
  );
};

//复选框的接口
export interface DataType {
  id: number;
  name: string;
  age: number;
  address: string;
}
